<template>
    <!-- 高德地图坐标选择器
    调用示例:
      <AmapSector v-if="AmapSectorShow" @closeModal="closeModalHandler" :lnglat="lnglat"/>
        lnglat 需要传递一个 {lng:xxx,lat:xxx 的数据对象  如果为空 则默认没有选择的地址}
    -->
    <a-modal title="地图位置选择器" :width="1200" :destroyOnClose="true"
             :maskClosable="false" :footer="false"
             :visible="visible" @cancel="handleCancel">
        <!-- 高德地图 -->
        <a-row :gutter="16">
            <a-col :span="6">
                <a-input :disabled="true" v-model="result.lat" placeholder="地图经度"/>
            </a-col>
            <a-col :span="6">
                <a-input :disabled="true" v-model="result.lng" placeholder="地图纬度"/>
            </a-col>
            <a-col :span="8">
                <a-input :disabled="true" v-model="result.address" placeholder="详细地址"/>
            </a-col>
            <a-col :span="2">
                <a-button
                        @click="onSubmit"
                        type="primary">确定
                </a-button>
            </a-col>
        </a-row>

        <a-divider/>
        <div class="amap-page-container">
            <!--搜索-->
            <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"/>
            <!--地图-->
            <el-amap vid="amapDemo" :center="mapCenter" :zoom="12" :events="events" class="mapBox">
                <!--标注-->
                <el-amap-marker :position="marker.position" :visible="marker.true" :icon="marker.icon"
                                :draggable="false" :vid="0"/>
            </el-amap>
        </div>
    </a-modal>
</template>
<script>
    import Vue from 'vue';
    //高德地图  GLOBAL_CONFIG.AMAP_CONFIG 是在模板页配置的
    import VueAMap from 'vue-amap';
    Vue.use(VueAMap)
    VueAMap.initAMapApiLoader(GLOBAL_CONFIG.AMAP_CONFIG);
    export default {
        props: ["lnglat"],
        data() {
            const _this = this;
            return {
                visible: true, //modal 显示状态
                result: {
                    lat: null,
                    lng: null,
                    country: null,
                    province: null,
                    city: null,
                    district: null,

                    street: null,
                    streetNumber: null,

                    address: null,
                }, //最终主键返回的数据
                mapCenter: [104.064591, 30.655703],
                loaded: false,
                plugin: [{
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 100,            //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy: true,     //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
                    extensions: 'all',
                    pName: 'Geolocation'
                }],
                events: {
                    click(e) {
                        _this.getLngLat(e)
                    }
                },
                marker: {
                    position: [104.064591, 30.655703],
                    visible: false,
                },
                markers: [],
                searchOption: {
                    city: '全国',
                    citylimit: true
                },
            }
        },
        methods: {
            //根据经纬获取位置坐标和位置
            getLngLat(e) {

                let {lng, lat} = e.lnglat; //提取元素
                let lonAndlat = lng + "," + lat;
                const geocoder = new AMap.Geocoder({radius: 1000, extensions: "all"});
                geocoder.getAddress(lonAndlat, (status, result) => {
                    if (status === 'complete' && result.regeocode) {
                        //获取行政区域信息
                        let addressComponent = result.regeocode.addressComponent;
                        //提取元素
                        let {country, province, city, district, street, streetNumber} = addressComponent;
                        //合并详细地址到这个对象
                        let address = result.regeocode.formattedAddress
                        //组件新对象
                        this.result = {lng, lat, country, province, city, district, street, streetNumber, address};

                    } else {
                        alert('根据经纬度查询地址失败')
                    }
                });


                this.marker.position = [lng, lat];
                this.marker.visible = true
            },
            //位置搜索主键
            onSearchResult(pois) {
                let latSum = 0;
                let lngSum = 0;
                if (pois.length > 0) {
                    pois.forEach(poi => {
                        let {lng, lat} = poi;
                        lngSum += lng;
                        latSum += lat;
                        this.markers.push([poi.lng, poi.lat]);
                    });
                    let center = {
                        lng: lngSum / pois.length,
                        lat: latSum / pois.length
                    };
                    this.mapCenter = [center.lng, center.lat];
                }
            },
            //关闭
            handleCancel() {

                this.visible = false;
                this.$emit('closeModal', {location: false});
            },
            //保存
            onSubmit() {
                this.visible = false;
                this.$emit('closeModal', {location: this.result});
            }
        },
        created() {
            if (this.lnglat.lng && this.lnglat.lat) {
                this.getLngLat({lnglat: this.lnglat});
            }
        }
    }
</script>
<style>
    .amap-marker:first-child .amap-icon img {
        width: 25px;
        height: 34px;
    }

    .amap-page-container {
        position: relative;
        width: 100%;
        height: 400px;
    }

    .mapBox {
        position: relative;
        height: 400px;
        margin-top: 0;
        top: -50px;
    }

    .search-box {
        position: relative;
        top: 10px;
        left: 10px;
    }
</style>
